<template>
  <!--费用明细-->
  <md-popup v-model="value" position="bottom" :has-mask="true" prevent-scroll>
    <md-popup-title-bar title="计价规则" cancel-text="关闭" @cancel="hidePopUp()"></md-popup-title-bar>
    <div id="charges_rules_box_sel">
      <md-scroll-view ref="scrollView" :auto-reflow="true" :scrolling-x="false" :bouncing="false">
        <div class="charges_rules">
          <p class="city_style">{{cityStyle}}</p>
          <p class="city_name">
            {{cityName}}
            <span>({{cityDate}})</span>
          </p>
          <div class="pinche_num">
            <p>拼车人数</p>
            <ul>
              <li :class="{'ative':ative==item}" v-for="(item,index) in numPeople" :key="index" @click="PeopleSle(item,index)">{{item}}</li>
            </ul>
          </div>
          <div style="clear:both"></div>
          <div class="pinche_money">
            <h6>拼车一口价</h6>
            <p v-for="(item,index) in pincheDate" :key="index">
              {{item.name}}
              <span>{{item.pinPrice[PeopleIndex].orderPrice}}</span>
            </p>
          </div>
          <!-- <div class="pinche_date_list" v-for="(item,index) in pincheDate" :key="index">
                        <p class="pinche_hd">{{item.name}}</p>
                        <table class="tbl_content">
                            <thead>
                                <tr>
                                    <td>人数</td>
                                    <td>价格</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item1,index) in item.pinPrice" :key="index">
                                    <td>{{item1.orderNum}}</td>
                                    <td>{{item1.orderPrice}}</td>
                                </tr>
                            </tbody>
                        </table>
          </div>-->
          <p class="pinche_text">在“电子围栏”内用车，每人固定价格收费，拼车全程 一口价，堵车不加价</p>
          <p class="incityzPinche">专车一口价</p>
          <div class="baoche_list">
            <p v-for="(item,index) in zhuancheDate" :key="index">
              {{item.name}}
              <span>{{item.zhuanPrice}}</span>
            </p>
          </div>
          <p class="incityzPinche">说明</p>
          <div class="shuom">
            <p>1、拼车、专车为固定费用，乘客叫车需先支付车费，取消订单系统会将支付的车辆，退款至个人账户余额。</p>
            <p>2、如有特殊需要退款至支付账号，请联系客服话400-5555-8888</p>
          </div>
        </div>
      </md-scroll-view>
    </div>
  </md-popup>
</template>
<script>
import { Popup, PopupTitleBar, Picker, Selector, Dialog, ScrollView } from 'mand-mobile';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import { mapGetters, mapActions, mapMutations } from 'vuex';
import Loading from '@/components/loading';
import http from '@/common/http';
var moment = require('moment');
moment.locale('zh-cn');
export default {
  name: 'rules-selector',
  components: {
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [Selector.name]: Selector,
    [Picker.name]: Picker,
    [ScrollView.name]: ScrollView
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    appendTo: {
      default: () => document.body
    }
  },
  data() {
    return {
      Height: {
        height: ''
      },
      cityName: '',
      cityDate: '',
      cityStyle: '',
      pincheDate: [],
      zhuancheDate: [],
      numPeople: ['1人', '2人', '3人', '4人'],
      ative: '1人',
      PeopleIndex: 0
    };
  },
  created() {
    if (this.$route.query.orderno) {
      let params = {
        orderNo: this.$route.query.orderno
      };
      Loading.show();
      http.post('/pakj/city/getPriceByTime', params).then(res => {
        Loading.hide();
        console.log(res.data);
        if (res.data.code === '000000') {
          let data = JSON.parse(res.data.data);
          this.cityName = data.priceCity;
          this.cityStyle = data.priceName;
          this.cityDate = data.priceDate;
          if (data.pinPriceDetail) {
            for (var k in data.pinPriceDetail) {
              for (var j in data.pinPriceDetail[k]) {
                var pinPriceDetail = {
                  name: j,
                  pinPrice: data.pinPriceDetail[k][j]
                };
                this.pincheDate.push(pinPriceDetail);
              }
            }
          }
          if (data.zhuanPriceDetail) {
            for (var i in data.zhuanPriceDetail) {
              for (var n in data.zhuanPriceDetail[i]) {
                var zhuanPriceDetail = {
                  name: n,
                  zhuanPrice: data.zhuanPriceDetail[i][n]
                };
                this.zhuancheDate.push(zhuanPriceDetail);
              }
            }
          }
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    } else {
      Dialog.alert({
        title: '提示',
        content: '获取不到订单号',
        confirmText: '确定'
      });
    }
  },
  methods: {
    getheight() {
      this.Height.height = this.$refs.driveridentitybox.clientHeight + 'px';
    },
    hidePopUp() {
      this.value = false;
    },
    // 选择拼车人数
    PeopleSle(item, index) {
      this.ative = item;
      this.PeopleIndex = index;
    },
    // 处理金额
    orderAmtFormat(number) {
      if (number.indexOf('.') === -1) {
        return number + '.00';
      } else {
        return number;
      }
    }
  },
  mounted() {
    if (this.appendTo) {
      this.appendTo.appendChild(this.$el);
    }
  },
  beforeDestroy() {
    if (this.appendTo) {
      this.appendTo.removeChild(this.$el);
    }
  },
  computed: {
    ...mapGetters(['getIncityOrderDate'])
  }
};
</script>
<style lang="stylus">
p, h6 {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#charges_rules_box_sel {
  background-color: #fff;
  height: 800px;
  overflow: hidden;
  overflow-y: auto;

  .charges_rules {
    height: 100%;
  }

  .pinche_num {
    margin: 20px 30px;
  }

  .pinche_num p {
    font-size: 30px;
    color: #666;
  }

  .pinche_num ul li {
    margin-top: 20px;
    font-size: 26px;
    color: #666;
    height: 56px;
    width: 100px;
    line-height: 56px;
    text-align: center;
    float: left;
    margin-left: 20px;
    border: solid 1px #E0E0E0;
  }

  .pinche_num ul li.ative {
    border: solid 1px #FF6917;
    color: #FF6917;
    background-color: #FFECE1;
  }

  .pinche_money {
    margin: 20px 30px;
  }

  .pinche_money h6 {
    font-size: 30px;
    color: #333;
    font-weight: 400;
  }

  .pinche_money p {
    margin-top: 15px;
    font-size: 26px;
    color: #999;
  }

  .pinche_money p span {
    float: right;
  }

  .city_style {
    font-size: 48px;
    color: #333;
    text-align: center;
    padding-top: 20px;
  }

  .shuom {
    margin: 10px 30px;
  }

  .shuom p {
    font-size: 26px;
    color: #999;
  }

  .city_name {
    font-size: 32px;
    color: #333;
    text-align: center;
  }

  .city_name span {
    font-size: 26px;
    color: #666;
    padding-left: 20px;
    margin-top: 10px;
  }

  .incityzPinche {
    font-size: 30px;
    color: #333;
    font-weight: 400;
    margin-top: 30px;
    margin-left: 30px;
  }

  .pinche_date_list {
    margin: 20px 30px 20px 30px;
  }

  .pinche_hd {
    font-size: 24px;
    color: #666;
  }

  .tbl_content {
    margin-top: 10px;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
  }

  .tbl_content thead td {
    border-right: 1px solid #B8B8B8;
    border-top: 1px solid #B8B8B8;
    border-left: 1px solid #B8B8B8;
    color: #333;
    text-align: center;
    padding: 10px 5px;
    font-size: 26px;
  }

  .tbl_content tbody td {
    text-align: center;
    border: 1px solid #B8B8B8;
    color: #333;
    height: 40px;
    padding: 5px 5px;
    word-break: break-all;
    font-size: 26px;
  }

  .pinche_text {
    margin: 30px;
    font-size: 26px;
    color: #333;
  }

  .baoche_list {
    margin: 20px 30px 0px 30px;
    padding-bottom: 10px;
  }

  .baoche_list p {
    font-size: 28px;
    color: #999;
    margin-top: 10px;
  }

  .baoche_list p span {
    float: right;
  }
}
</style>
